.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba($color: #000000, $alpha: .3);
  display: none;

  .mask_container {
    width: 250px;
    min-width: 200px;
    max-width: 300px;
    min-height: 120px;
    margin: 100px auto;

    .container {
      display: none;
    }

    .show_container {
      display: flex;
      width: 100%;
      min-height: inherit;
      background-color: #fff;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 5%;
      padding-right: 5%;

      .col_title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-close2 {
          padding-top: 2px;
          border: 1px solid gray;
          border-radius: 2px;
        }

        .icon-close2:hover {
          background-color: grey;
          color: #fff;
        }
      }

      .col_input {
        width: 100%;

        input {
          width: 97%;
        }
      }

      .col_edit_btn {
        display: flex;
        justify-content: flex-end;

        button:first-child {
          margin-right: 10px;
        }
      }
    }
  }
}

.show_mask {
  display: block;
}